<template>
  <div class="center-panel">
    <div class="droppable" @drop="onDrop" @dragover.prevent @click="selectForm(form)">
    <el-form  :ref="form.formData" :model="form" :label-position="form.labelPosition"  :disabled="form.disabled" :label-width="form.labelWidth" :size="form.size">
    <el-row :gutter="form.gutter">
    
    <el-col :span="item.data.span" v-for="(item, index) in form.components" :key="index" class="dropped" >
      <div  @click.stop="selectItem(item)" class=" drop-item">
        <el-button class="item-delete" type="danger" size="mini" @click.stop="deleteComponent(index)" icon="el-icon-delete" circle></el-button>
      <el-form-item :label="item.data.label">
          <component :is="item.type" :data="item.data" v-model="item.data.value"  style="width:100%"></component>
      </el-form-item>
        </div>
        </el-col>
    </el-row>
    </el-form>
    <div v-if="form.components.length === 0" class="empty-tip">拖拽组件到此区域</div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      form:{
        id:0,
        name:'elForm',
        model:'formData',
        rule:'rule',
        disabled:false,
        labelWidth:'70px',
        labelPosition:'left',
        size:'mini',
        gutter:30,
        components: [],
      },
      selectedItem: null,
      formItem:null,
    };
  },
  methods: {
    onDrop(event) {
       const componentData = JSON.parse(event.dataTransfer.getData('component'));
      this.form.components.push({
        type: componentData.type,
        data: { ...componentData }
      });
    },
    clearComponents() {
      // 清空中间区域的所有组件
      this.form.components = [];
    },
    deleteComponent(index) {
      // 删除指定位置的中间区域组件
      this.form.components.splice(index, 1);
      this.$emit('reitem',this.selectedItem=null )
    },
    viewCode(code) {
      // 查看组件代码
      console.log(code);
    },
    selectItem(item) {
      this.selectedItem = item;
      this.$emit('reitem',this.selectedItem )
    },
    selectForm(item){
      this.formItem = item;
      this.formItem.id=item.id+1
      this.$emit('reform',this.formItem)
    },
    getUuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
          v = c == 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    }
  }
};
</script>

<style scoped>
.center-panel {
  padding: 10px;
}

.droppable {
  min-height: 83.5vh;
  border: 4px dashed #e2e2e2;
  background-color: #f9f9f9;
  padding: 20px;
}

.dropped {
  display: inline-block;
  
  margin-bottom: 10px;
  
  
  cursor: pointer;
  
}
.empty-tip {
  text-align: center;
  align-components: center;
  line-height: 83.5vh;
}
.drop-item{
  height:50px;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  position: relative; /* 设置容器相对定位 */
}
.item-delete{
  position: absolute; /* 设置按钮绝对定位 */
  top: 0; /* 距离顶部的距离 */
  right: 0; /* 距离右侧的距离 */
  z-index: 1;
}
</style><!-- margin-right: 10px; -->